<template>
	<view>
		<view class="ZheZhao" v-if="isShow" @click="closeAssociation"></view>
		<view class="association" :style="{ bottom: isShow ? 0 : '-1050rpx' }">
			<view class="associationTitle">
				关联新企业
				<image src="/static/images/closeimg.png" @click="closeAssociation"></image>
			</view>
			<view class="PolicySearch Enterprise">
				<view class="PolicySearchc">
					<input style="width: 410rpx;" type="text" v-model="value" @input="handleInput" placeholder="输入企业名称">
					<view class="PolocyBtn" v-if="showCompanyDetail && bindBtnEnabled" :class="{ 'disabled': !bindBtnEnabled }" @click="handleBind">立即绑定</view>
					<view class="HomeSearchMoHu" v-if="isEnterprise">
						<view v-if="filteredResults.length > 0" class="HomeSearchMoHuLi"
							v-for="(item, index) in filteredResults" :key="index" @click="changeSearchType(item)">
							{{ item.title }}
						</view>
						<view class="HomeSearchMoHuText" v-else>暂无匹配到的数据</view>
					</view>
				</view>
			</view>
			<view class="associationBot" v-if="showCompanyDetail && selectedCompany">
				<view class="associationBotList">
					<view class="associationBotListl">统一社会信用代码</view>
					<view class="associationBotListr">{{selectedCompany.creditCode}}</view>
				</view>
				<view class="associationBotList">
					<view class="associationBotListl">成立日期</view>
					<view class="associationBotListr">{{selectedCompany.createTime}}</view>
				</view>
				<view class="associationBotList">
					<view class="associationBotListl">法定代表人姓名</view>
					<view class="associationBotListr">{{selectedCompany.operName}}</view>
				</view>
				<view class="associationBotList">
					<view class="associationBotListl">注册地址</view>
					<view class="associationBotListr">{{selectedCompany.address}}</view>
				</view>
				<view class="associationBotList">
					<view class="associationBotListl">经营范围</view>
					<view class="associationBotListr">{{selectedCompany.scope}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCompanyByName, getCompanyByCode, collectCompany } from '@/api/api.js'

	export default {
		props: {
			isShow: Boolean
		},
		data() {
			return {
				isEnterprise: false,
				value: '',
				filteredResults: [],
				showCompanyDetail: false,
				selectedCompany: null,
				bindBtnEnabled: false
			};
		},
		watch: {
			isShow(newVal) {
				// 添加条件判断，确保document对象存在，小程序环境中document对象不存在。需要修改组件，添加条件判断以避免在不支持document对象的环境中访问它
				if (typeof document !== 'undefined' && document.body) {
					if (newVal) {
						document.body.style.overflow = 'hidden'
					} else {
						document.body.style.overflow = 'auto'
					}
				}
			}
		},
		methods: {
			async changeSearchType(company) {
				this.value = company.companyName
				this.isEnterprise = false
				try {
					console.log(company.creditCode)
					const response = await getCompanyByCode({ CreditCode: company.creditCode })
					console.log(response)
					if (response.code === 0 && response.data) {
						this.showCompanyDetail = true
						this.selectedCompany = {
							...company,
							id: response.data.id,
							createTime: response.data.createTime || '',
							operName: response.data.operName || '',
							address: response.data.address || '',
							scope: response.data.scope || ''
						}
						this.bindBtnEnabled = true
					}
				} catch (error) {
					console.error('获取企业详情失败：', error)
					this.showCompanyDetail = false
					this.selectedCompany = null
				}
			},
			closeAssociation() {
				this.$emit('changeAssociation')
				this.showCompanyDetail = false
				this.selectedCompany = null
				this.value = ''
				this.bindBtnEnabled = false
			},
			async handleInput() {
				const keyword = this.value.trim();
				if (keyword) {
					try {
						const response = await getCompanyByName(keyword)
						console.log(response)
						if (response.code === 0 && response.data) {
							this.isEnterprise = true
							this.filteredResults = response.data.map(item => ({
								title: item.Name,
								companyName: item.Name,
								creditCode: item.CreditCode,
							}))
						} else {
							this.filteredResults = []
							this.isEnterprise = false
						}
					} catch (error) {
						console.error('获取企业列表失败：', error)
						this.filteredResults = []
						this.isEnterprise = false
					}
				} else {
					this.filteredResults = []
					this.isEnterprise = false
					this.showCompanyDetail = false
				}
			},
			async handleBind() {
				if (!this.bindBtnEnabled || !this.selectedCompany) return
				try {
					if (!this.selectedCompany.id) {
						uni.showToast({
							title: '企业信息不完整',
							icon: 'none'
						})
						return
					}
					const response = await collectCompany(this.selectedCompany.id)
					console.log(response)
					if (response.code === 0) {
						uni.showToast({
							title: '企业绑定成功',
							icon: 'none'
						})
						this.$emit('refreshList')
						this.closeAssociation()
					} else if (response.code === 500 && response.msg === '您已收藏') {
						uni.showToast({
							title: '该企业已绑定',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: response.msg || '绑定企业失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('绑定企业失败：', error)
					uni.showToast({
						title: '绑定企业失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.ZheZhao {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 98;
		background: rgba(0, 0, 0, .5);
	}

	.association {
		position: fixed;
		left: 0;
		bottom: -1050rpx;
		width: 100%;
		height: 1050rpx;
		background: #f7f8fc;
		z-index: 99;
		padding: 0 24rpx;
		transition: all .3s;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;

		.associationTitle {
			height: 102rpx;
			line-height: 102rpx;
			padding: 16rpx 0 0;
			font-size: 38rpx;
			color: #202020;
			position: relative;
			text-align: center;
			font-weight: bold;
			flex-shrink: 0;

			image {
				position: absolute;
				right: 2rpx;
				top: 54rpx;
				width: 26rpx;
				height: 27rpx;
			}
		}

		.Enterprise {
			padding: 30rpx 24rpx 40rpx;
			background: none;
			flex-shrink: 0;
			.PolicySearchc{
				position: relative;
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				input {
					flex: 1;
					height: 60rpx;
					padding: 0 20rpx;
					border: 2rpx solid #e5e5e5;
					border-radius: 10rpx;
					font-size: 28rpx;
					background: #ffffff;
				}

				.PolocyBtn {
					color: #ffffff !important;
					background: #2f59fe;
					padding: 0 30rpx;
					border-radius: 10rpx;
					height: 60rpx;
					line-height: 60rpx;
					white-space: nowrap;
					font-size: 28rpx;
					min-width: 140rpx;
					text-align: center;
					flex-shrink: 0;
				}

				.PolocyBtn.disabled {
					background: #ccc;
					cursor: not-allowed;
				}

				.HomeSearchMoHu {
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					background: #FFFFFF;
					border-radius: 8rpx;
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
					z-index: 100;
					max-height: 400rpx;
					overflow-y: auto;
					margin-top: 10rpx;
					
					.HomeSearchMoHuLi {
						padding: 20rpx;
						font-size: 28rpx;
						color: #333;
						border-bottom: 1rpx solid #ECECEC;
						&:last-child {
							border-bottom: none;
						}
					}
					
					.HomeSearchMoHuText {
						padding: 20rpx;
						font-size: 28rpx;
						color: #999;
						text-align: center;
					}
				}
			}
		}

		.associationBot {
			margin: 29rpx 0 0;
			padding: 0 0 0 41rpx;
			background: #ffffff;
			border-radius: 20rpx;
			flex: 1;
			overflow-y: auto;
			&::-webkit-scrollbar {
				width: 6rpx;
				background-color: #f5f5f5;
			}
			&::-webkit-scrollbar-thumb {
				background-color: #ddd;
				border-radius: 3rpx;
			}

			.associationBotList {
				display: flex;
				align-items: center;
				padding: 30rpx 41rpx 30rpx 0;
				justify-content: space-between;
				border-bottom: 1px solid #ececec;

				.associationBotListl {
					font-size: 28rpx;
					color: #4e5262;
				}

				.associationBotListr {
					max-width: 320rpx;
					font-size: 28rpx;
					color: #4e5262;
					text-align: right;
				}

				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
</style>